<template>
  <div class="transcript">
    <V-Header></V-Header>
    <el-row class="headline">
      <el-col :span="6">
        <router-link :to="{name:'Student'}">
          <el-button class="headlinebtn" icon="el-icon-tickets">
            <el-col tag="span" style="line-height: 0.14rem;">学生自评</el-col>
          </el-button>
        </router-link>
      </el-col>
      <el-col :span="6">
        <router-link :to="{name:'Evaluate'}">
          <el-button class="headlinebtn" icon="el-icon-user">
            <el-col tag="span" style="line-height: 0.14rem;">学生互评</el-col>
          </el-button>
        </router-link>
      </el-col>
      <el-col :span="6">
        <router-link :to="{name:'Transcript'}">
          <el-button class="headlinebtn active" icon="el-icon-edit-outline">
            <el-col tag="span" style="line-height: 0.14rem;">学生成绩</el-col>
          </el-button>
        </router-link>
      </el-col>
    </el-row>
    <div class="maincont">
      <!-- 个人信息 -->
      <el-row>
        <el-col
          :sm="10"
          :offset="1"
          :xs="{span:22,offset:0}"
          style="margin-bottom:0.2rem; position:relative"
        >
          <div class="iFont1_1">个人信息</div>
          <div class="iFont1">
            姓 名：
            <span>{{list.full_name}}</span>
          </div>
          <div class="iFont1">
            学 校：
            <span>{{list.school_title}}</span>
          </div>
          <div class="iFont1">
            年 级：
            <span>{{list.grade_year_title}}</span>
          </div>
          <div class="iFont1">
            班 级：
            <span>{{list.grade_title}}</span>
          </div>
          <div class="iFont1_2">注：该成绩仅反映该学生当次活动表现，分数仅供参考</div>
          <div class="t_scro">
            <div class="iFont1" style="margin:0.5rem 0rem 0.15rem 0rem">总 分</div>
            <div class="t_scro1">
              {{datas!=''?datas.total_score:'0.00'}}
              <span>分</span>
            </div>
          </div>
        </el-col>
        <el-col
          :sm="10"
          :offset="1"
          :xs="{span:22,offset:0}"
          class="choses"
          style="margin-bottom:0.2rem"
        >
          <div class="iFont1_1">活动日期</div>
          <div style="margin-top:0.2rem"></div>
          <el-select
            style="margin-left: 0.3rem; border:1px solid rgba(166, 173, 215, 1);border-radius: 0.2rem;"
            v-model="times"
            placeholder="请选择"
            @change="changetime()"
          >
            <el-option
              v-for="(item,index) in list.activity_time_concise"
              :key="index"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
          <div class="iFont1">
            活动主题：
            <span>{{themeName||'暂无'}}</span>
          </div>
          <div class="iFont1">
            小组名称：
            <span>{{teamName||'暂无'}}</span>
          </div>
        </el-col>
      </el-row>
      <!-- 学校信息 -->
      <!-- PC -->
      <!-- <el-row class="activityinfo hidden-xs-only">
        <el-col :offset="2" :span="4">
          <li style="text-align: left;">班级：{{list.grade_title}}</li>
        </el-col>
        <el-col :offset="2" :span="10">
          <li>
            <span>活动日期:</span>
            <el-select v-model="times" placeholder="请选择" @change="changetime(times)">
              <el-option
                v-for="(item,index) in list.activity_time_concise"
                :key="index"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </li>
        </el-col>
        <el-col :span="6">
          <li v-if="full_score">得分:{{full_score}}分</li>
        </el-col>
      </el-row>-->
      <!-- wap -->
      <!-- <el-row class="activityinfo hidden-sm-and-up">
        <li style="text-align: left;">班级：{{list.grade_title}}</li>
        <li>
          <span>活动日期:</span>
          <el-select v-model="times" placeholder="请选择" @change="changetime(times)">
            <el-option
              v-for="(item,index) in list.activity_time_concise"
              :key="index"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
        </li>
        <li v-if="full_score">得分:{{full_score}}分</li>
      </el-row>-->

      <!-- 雷达图 -->
      <!-- pc -->
      <el-row class="hidden-xs-only" v-if="datas!=''">
        <el-col class="radarmap" :sm="{span: 22, offset: 1}" style="padding: 0.33rem 0;border:none; padding-top:0rem">
          <p class="title" style="color:#263173; font-weight:bold; text-align: center;">学生能力测评雷达图</p>
          <div class="small">
            <!-- <line-chart :chart-data="datacollection" :options="options"></line-chart> -->
            <div id="main"></div>
          </div>
          <!-- <p class="conter" v-if="datas.description">{{datas.description}}</p> -->
        </el-col>
      </el-row>
      <!-- 手机 -->
      <el-row class="hidden-sm-and-up" v-if="datas!=''">
        <el-col class="radarmap" style="padding: 0.33rem 0;border:none; padding-top:0rem">
          <p class="title1" style="color:#263173; font-weight:bold; ">学生能力测评雷达图</p>
          <div class="big">
            <!-- <line-chart :chart-data="datacollection" :options="options"></line-chart> -->
            <div id="mains"></div>
          </div>
          <!-- <p style="width: 80%;margin: 0 auto;" v-if="datas.description">{{datas.description}}</p> -->
        </el-col>
      </el-row>

      <!-- 活动名称 -->
      <!-- <el-row class="activityname">
        <el-col :sm="{span: 22, offset: 1}">
          <el-table
            :data="tableData"
            border
            style="width: 100%;border:1px solid rgba(202,233,247,1);"
            :header-cell-style="tableHeaderColor"
          >
            <el-table-column prop="xh" align="center" label="序号" min-width="25%"></el-table-column>
            <el-table-column prop="title" align="center" label="活动名称" min-width="40%"></el-table-column>
            <el-table-column prop="rank" align="center" label="小组排名" min-width="25%"></el-table-column>
          </el-table>
        </el-col>
      </el-row> -->
      <!-- <div class="total-points">总分数:{{totalPoints}}分</div> -->
      <!-- 文化 -->
      <el-row class="culture" >
        <el-col :sm="{span: 22, offset: 1}" style="position: relative; ">
          <img
            src="@/assets/images/transcript/tImg1.png"
            class="hidden-sm-and-up"
            style="width:2.15rem;height:1.45rem; position: absolute;z-index:5; top:-0.4rem; left:5%"
          />
          <el-table
            :data="tableData1"
            border
            style="width: 100%;border:1px solid rgba(202,233,247,1);"
            :header-cell-style="tableHeaderColor"
          >
            <el-table-column
              align="center"
              :render-header="renderHeader"
              label="文化基础/CULTURAK FOUNDATION"
              min-width="25%"
            >
              <el-table-column prop="nav1" align="center" label min-width="25%"></el-table-column>
              <el-table-column prop="nav2" align="center" label min-width="25%"></el-table-column>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
      <!-- 自主发展 -->
      <el-row class="culture">
        <el-col :sm="{span: 22, offset: 1}" style="position: relative; ">
          <img
            src="@/assets/images/transcript/tImg2.png"
            class="hidden-sm-and-up"
            style="width:1.61rem;height:1.66rem; position: absolute;z-index:5; top:-0.7rem; right:5%"
          />
          <el-table
            :data="tableData2"
            border
            style="width: 100%;border:1px solid rgba(202,233,247,1);"
            :header-cell-style="tableHeaderColor"
          >
            <el-table-column
              align="center"
              :render-header="renderHeader"
              label="自主发展/INDEPENDENT DEVELOPMENT"
              min-width="25%"
            >
              <el-table-column prop="nav1" align="center" label min-width="25%"></el-table-column>
              <el-table-column prop="nav2" align="center" label min-width="25%"></el-table-column>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
      <!-- 自主发展 -->
      <el-row class="culture">
        <el-col :sm="{span: 22, offset: 1}" style="position: relative; ">
          <img
            src="@/assets/images/transcript/tImg3.png"
            class="hidden-sm-and-up"
            style="width:1.70rem;height:1.62rem; position: absolute;z-index:5; top:-0.7rem; left:5%"
          />
          <el-table
            :data="tableData3"
            style="width: 100%;border:1px solid rgba(202,233,247,1);"
            :header-cell-style="tableHeaderColor"
          >
            <el-table-column
              align="center"
              :render-header="renderHeader"
              label="社会参与/SOCIAL PARTICIPATION"
              min-width="25%"
            >
              <el-table-column prop="nav1" align="center" label min-width="25%"></el-table-column>
              <el-table-column prop="nav2" align="center" label min-width="25%"></el-table-column>
            </el-table-column>
          </el-table>
          <!-- <p
            class="referral"
          >说明：填写当天活动小组内认识到的其他成员姓名和分数。表现优秀为“100-90”分；表现良好为“90-80”分；表现一般为“80-70”分；表现较差为“70-60”分</p>-->
        </el-col>
      </el-row>
      <el-row class="culture" style="margin-top:0.8rem">
        <el-col
          :sm="{span: 22, offset: 1}"
          style="position: relative; padding-bottom:0.37rem;border:1px solid #263173; border-radius:0.1rem;"
        >
          <div
            style="height:0.9rem; border-bottom:1px dashed #666666; line-height:0.9rem; font-size:0.3rem; color:#263173;font-weight:500; padding-left:0.4rem"
          >{{datas.description1}}</div>
          <div
            style="font-size:0.3rem; color:#666666;font-weight:500; padding-left:0.4rem; margin-top:0.25rem"
          >{{datas.description2}}</div>
          <div
            style="font-size:0.3rem; color:#666666;font-weight:500; padding-left:0.4rem; margin-top:0.25rem"
          >{{datas.description3}}</div>
          <div
            style="font-size:0.3rem; color:#666666;font-weight:500; padding-left:0.4rem; margin-top:0.25rem"
          >{{datas.description4}}</div>
          <div
            style="font-size:0.3rem; color:#666666;font-weight:500; padding-left:0.4rem; margin-top:0.25rem"
          >{{datas.description5}}</div>
          <div
            style="font-size:0.3rem; color:#666666;font-weight:500; padding-left:0.4rem; margin-top:0.25rem"
          >{{datas.description6}}</div>
          <div
            style="font-size:0.3rem; color:#666666;font-weight:500; padding-left:0.4rem; margin-top:0.25rem"
          >{{datas.description7}}</div>
          <img
            src="@/assets/images/transcript/tImg4.png"
            class="hidden-sm-and-up"
            style="width:1.68rem;height:3.07rem; position: absolute;z-index:5; bottom:-0.4rem; right:-0.08rem"
          />
        </el-col>
      </el-row>
      <!-- 雷达图 -->
      <!-- pc -->
      <!-- <el-row class="hidden-xs-only" v-if="datas!=''">
        <el-col class="radarmap" :sm="{span: 22, offset: 1}">
          <p class="title">学生能力测评雷达图</p>
          <div class="small">
            <div id="main"></div>
          </div>
          <p class="conter" v-if="datas.description">{{datas.description}}</p>
        </el-col>
      </el-row>-->
      <!-- 手机 -->
      <!-- <el-row class="hidden-sm-and-up" v-if="datas!=''">
        <el-col class="radarmap" style="padding: 33px 0;">
          <p class="title1">学生能力测评雷达图</p>
          <div class="big">
            <div id="mains"></div>
          </div>
          <p style="width: 80%;margin: 0 auto;" v-if="datas.description">{{datas.description}}</p>
        </el-col>
      </el-row>-->
    </div>
  </div>
</template>

<script>
import VHeader from "@/components/Header";
// import LineChart from "@/components/profitLive.js";
// import echarts from "echarts";
var echarts = require("echarts/lib/echarts");
require("echarts/lib/chart/radar");
export default {
  name: "teacher",
  components: {
    VHeader,
    // LineChart
  },
  data() {
    return {
      datas: "",
      list: "",
      data: "",
      times: "", //时间
      full_score: "", //成绩
      totalPoints: 0, // 学生总分
      tableData: [],
      tableData1: [
        {
          nav1: "实践能力",
          nav2: "思辨能力",
        },
        {
          nav1:
            "学生在学习、理解、运用知识和技能等方面所培养的解决问题的基本能力。",
          nav2:
            "学生在学习、理解、运用知识和技能的过程中培养的辩证思考的能力。",
        },
      ],
      tableData2: [
        {
          nav1: "文明素养",
          nav2: "领导能力",
        },
        {
          nav1: "在课程活动中遵规守序、不大声喧哗等行为反应的个人文明素养。",
          nav2: "在课程活动中遵规守序、不大声喧哗等行为反应的个人文明素养。",
        },
      ],
      tableData3: [
        {
          nav1: "团队协做",
          nav2: "沟通能力",
        },
        {
          nav1: "在活动过程中能够做到关心同学，互相尊重，乐于分享，相互协作。",
          nav2:
            "在活动过程中能够与导师或同学进行有效的沟通，对小组的学习做出贡献。",
        },
      ],
      textarea: "",
      datacollection: null,
      options: {
        legend: {
          // title下面的 小标题 和 小图的配置
          display: false,
        },
        //配置刻度轴相关的颜色
        scale: {
          // Hides the scale
          display: true,
          ticks: {
            display: false,
            //刻度轴上字体的颜色
            backdropColor: "#1ABCDC", //刻度轴标签的背景色
            suggestedMin: 60,
            suggestedMax: 100,
            stepSize: 10, //用户定义的比例尺的固定步长
          },
          pointLabels: {
            //外边一圈字体的颜色
            fontColor: "#333333",
          },
          angleLines: {
            //角度线的配置
            color: "#1ABCDC",
          },
          gridLines: {
            //雷达图外圈轴的颜色  一圈一圈的轴
            color: "rgba(72,201,277,1)",
          },
        },
      },
      themeName: "",
      teamName: "",
      // practice:[78,45,7,89,9,0]
    };
  },
  watch:{
    times(){
      this.getztorteam();
    }
  },
  methods: {
    renderHeader(h, { column }) {
      let header = column.label.split("/");
      return [h("p", [h("p", {}, header[0]), h("span", {}, header[1])])];
    },
    // 新增获取活动主题和小组
    getztorteam(){
      this.$api.get("/student/team", {
        activity_time:this.times,
      }).then((res) => {
        if (res.data.code == "1") {
          this.themeName = res.data.data.research_title
          this.teamName = res.data.data.alias_title
        }
      });
    },
    // 修改table header的背景色
    tableHeaderColor({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return "background:#263173;color:#fff";
      }
    },
    fillData() {
      this.datacollection = {
        // labels: ["实践能力", "KDA", "发育", "推进", "生存", "输出"],
        datasets: [
          {
            label: "得分",
            radius: 0,
            borderWidth: 0,
            borderColor: "rgba(26,188,220,1)",
            backgroundColor: "rgba(160,216,240,.4)",
            pointBorderColor: "rgba(26,188,220,.1)",
            hoverBackgroundColor: "rgba(26,188,220,1)",
            data: [0, 0, 0, 0, 0, 0],
          },
        ],
      };
    },
    drawPie(id, datas) {
      this.charts = echarts.init(document.getElementById(id));
      this.charts.setOption({
        radar: {
          name: {
            textStyle: {
              color: "#333333",
              backgroundColor: "#fff",
              borderRadius: 3,
            },
          },
          splitArea: { // 坐标轴在 grid 区域中的分隔区域，默认不显示。
              show: true,
              areaStyle: { // 分隔区域的样式设置。
                  color: ['#E9EAF1','#D5D7E4','#C3C6D8','#B3B7CE'],
                  // 分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。
              }
          },
          // 设置雷达图中间射线的颜色
          axisLine: {
            lineStyle: {
              width: 1,
              color: "rgba(120,216,234,1)", // 设置网格的颜色
            },
          },
          splitLine: {
            show: false,
            lineStyle: {
              width: 1,
              color: "rgba(120,216,234,1)", // 设置网格的颜色
            },
          },
          indicator: [
            { name: "实践能力\n" + datas[0], max: 100 },
            { name: "思辨能力\n" + datas[1], max: 100 },
            { name: "文明素养\n" + datas[2], max: 100 },
            { name: "领导能力\n" + datas[3], max: 100 },
            { name: "团队协作\n" + datas[4], max: 100 },
            { name: "沟通能力\n" + datas[5], max: 100 },
          ],
          radius: 110,
        },
        series: [
          {
            type: "radar",
            symbol: "none", // 拐点的样式，还可以取值'rect','angle'等
            data: [
              {
                value: datas,
              },
            ],
            label: {
              normal: {
                show: false,
              },
            },
            itemStyle: {
              normal: {
                color: "#1890FF",
                label: {
                  color: "#000", //字的颜色
                  borderColor: "#42B1E2", //拐点边框颜色
                },
                lineStyle: {
                  color: "#42B1E2",
                  width: 0,
                },
              },
            },
            areaStyle: {
              color: "rgba(160,216,240,.8)",
            },
          },
        ],
      });
    },
    changetime(val) {
      this.getData();
    },
    getList() {
      this.$api.get("/student", {}).then((res) => {
        if (res.data.code == "1") {
          this.list = res.data.data;
          this.totalPoints = res.data.data.score_panel_day.toFixed(2);
          this.$store.commit("setWapLoading", {
            username: res.data.data.full_name + "学生"
          });
          if (res.data.data.activity_concise != "") {
            this.times = res.data.data.activity_time_concise[0];
          }
          this.getData();
        }
      });
    },
    getData() {
      this.$api
        .get("/student/transcript", {
          time: this.times,
        })
        .then((res) => {
          this.reload();
          if (res.data.code == "1") {
            this.datas = res.data.data;
            var arr = [];
            res.data.data.activity.forEach((item, index) => {
              let json = {};
              json.xh = index + 1;
              json.title = item.title;
              json.rank = item.rank;
              arr.push(json);
            });
            this.tableData = arr;
            var json1 = {};
            json1.nav1 = res.data.data.practice + "分";
            json1.nav2 = res.data.data.speculation + "分";
            this.tableData1.push(json1);
            var json2 = {};
            json2.nav1 = res.data.data.civilization + "分";
            json2.nav2 = res.data.data.leadership + "分";
            this.tableData2.push(json2);
            var json3 = {};
            json3.nav1 = res.data.data.team + "分";
            json3.nav2 = res.data.data.communication + "分";
            this.tableData3.push(json3);
            var arr = [];
            arr.push(res.data.data.practice);
            arr.push(res.data.data.speculation);
            arr.push(res.data.data.civilization);
            arr.push(res.data.data.leadership);
            arr.push(res.data.data.team);
            arr.push(res.data.data.communication);
            this.$nextTick(function () {
              this.drawPie("main", arr);
              this.drawPie("mains", arr);
            });
          } else {
            this.datas = "";
            this.tableData = [];
            this.$alert(res.data.message, "", {
              confirmButtonText: "是"
            }).then(() => {});
          }
        });
    },
    reload() {
      this.tableData1 = [
        {
          nav1: "实践能力",
          nav2: "思辨能力",
        },
        {
          nav1:
            "学生在学习、理解、运用知识和技能等方面所培养的解决问题的基本能力。",
          nav2:
            "学生在学习、理解、运用知识和技能的过程中培养的辩证思考的能力。",
        },
      ];
      this.tableData2 = [
        {
          nav1: "文明素养",
          nav2: "领导能力",
        },
        {
          nav1: "在课程活动中遵规守序、不大声喧哗等行为反应的个人文明素养。",
          nav2: "在课程活动中承担小组管理工作，分工合理，对小组有责任意识。",
        },
      ];
      this.tableData3 = [
        {
          nav1: "团队协做",
          nav2: "沟通能力",
        },
        {
          nav1: "在活动过程中能够做到关心同学，互相尊重，乐于分享，相互协作。",
          nav2:
            "在活动过程中能够与导师或同学进行有效的沟通，对小组的学习做出贡献。",
        },
      ];
    },
  },
  mounted() {
    this.fillData();
    this.getList();
    
  },
};
</script>

<style lang="less">
.total-points {
  text-align: center;
  font-size: 18px;
  font-weight: bold;
  margin-top: 40px;
  color: #333;
}
.transcript {
  // overflow: hidden;
  table {
    thead {
      tr:nth-child(2) {
        display: none;
      }
    }
  }
  .el-table {
    .cell,
    input {
      font-size: 0.18rem;
      text-align: center;
    }
  }

  .headline {
    width: 100%;
    height: 1.4rem;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 0px 18px 0px rgba(0, 0, 0, 0.11);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-around;
    .headlinebtn {
      width: 100%;
      max-width: 2.81rem;
      height: 0.64rem;
      border-radius: 32px;
      font-size: 0.26rem;
      color: #333333;
      border: none;
      background: rgba(246, 246, 246, 1);
      span {
        display: inline-block;
      }
    }
    .active {
      background: rgba(34, 49, 115, 1) !important;
      color: rgba(255, 255, 255, 1) !important;
    }
  }
  .maincont {
    box-sizing: border-box;
    padding: 0.51rem 10px;
    margin-bottom: 29px;
    // .activityinfo {
    //   li {
    //     text-align: left;
    //     height: 0.3rem;
    //     line-height: 0.3rem;
    //     margin-bottom: 0.35rem;
    //     font-size: 0.2rem;
    //     font-weight: 500;
    //     color: rgba(51, 51, 51, 1);
    //     border-left: 4px solid #263274;
    //     padding-left: 15px;
    //     span {
    //       display: inline-block;
    //       line-height: 0.35rem;
    //       height: 0.35rem;
    //     }
    //     input {
    //       height: 0.35rem;
    //       line-height: 0.35rem;
    //       width: 3rem;
    //       max-width: 144px;
    //       background: rgba(246, 246, 246, 0.7);
    //       border: none;
    //       font-size: 0.18rem;
    //       color: #333333;
    //       text-align: center;
    //       &::-webkit-input-placeholder {
    //         color: #333333;
    //       }
    //     }
    //     .el-input__icon {
    //       line-height: 0.32rem;
    //       font-size: 0.14rem;
    //     }
    //   }
    // }
    form {
      overflow: hidden;
    }
    .selet-form-inline {
      margin-bottom: 51px;
      label {
        height: 60px;
        line-height: 60px;
        font-size: 18px;
      }
      input {
        max-width: 141px;
        height: 42px;
        line-height: 42px;
        font-size: 18px;
        margin-right: 52px;
        border-color: rgba(153, 153, 153, 1);
      }
      .determine {
        float: right;
        button {
          width: 97px;
          height: 44px;
          background: rgba(66, 177, 226, 1);
          border-radius: 22px;
          // box-shadow: 0px 0px 20px rgba(66, 177, 226, 0.4);
        }
      }
    }
    .referral {
      font-size: 14px;
      font-weight: 400;
      color: rgba(51, 51, 51, 1);
      margin-top: 21px;
    }
    .activityname,
    .culture {
      .el-table {
        border-radius: 0.1rem;
        border:none input {
          text-align: center;
          max-width: 465px;
        }
      }
      .fubiaoti {
        color: #333333;
        th {
          background: #fff;
        }
      }
    }
    .radarmap {
      margin-top: 45px;
      background: rgba(255, 255, 255, 1);
      border: 1px solid rgba(224, 224, 224, 1);
      border-radius: 10px;
      box-sizing: border-box;
      padding: 33px 39px;
      .title {
        font-weight: 500;
        color: rgba(51, 51, 51, 1);
        font-size: 18px;
      }
      .title1 {
        font-weight: 500;
        color: rgba(51, 51, 51, 1);
        font-size: 18px;
        text-align: center;
      }
      .small {
        max-width: 600px;
        margin: 0 auto;
        #main {
          width: 600px;
          height: 400px;
        }
      }
      .big {
        max-width: 320px;
        margin: 20px auto;
        #mains {
          width: 320px;
          height: 320px;
        }
      }
      .conter {
        width: 913px;
        font-size: 16px;
        line-height: 30px;
        margin: 0 auto;
      }
    }
  }
}

.iFont1_1 {
  font-size: 0.24rem;
  font-family: PingFang SC;
  font-weight: bold;
  color: rgba(38, 49, 115, 1);
  line-height: 0.3rem;
}
.iFont1_1:before {
  content: "";
  height: 10px;
  width: 6px;
  border-left: 0.07rem solid rgba(38, 49, 115, 1);
  background: rgba(38, 49, 115, 1);
  margin-right: 0.1rem;
}
.iFont1 {
  font-size: 0.24rem;
  font-family: PingFang SC;
  font-weight: 500;
  color: rgba(51, 51, 51, 1);
  margin-top: 0.2rem;
  margin-left: 0.3rem;
  span {
    color: #666666;
  }
}
.iFont1_2 {
  margin-left: 0.3rem;
  font-size: 0.22rem;
  margin-top: 0.2rem;
  font-family: PingFang SC;
  font-weight: 400;
  color: rgba(153, 153, 153, 1);
}
.t_scro {
  position: absolute;
  top: 0rem;
  right: 0rem;
}
.t_scro1 {
  font-size: 0.6rem;
  font-family: HelveticaNeue LT 107 XBlkCn;
  font-weight: bold;
  color: rgba(233, 96, 96, 1);
  span {
    font-size: 0.2rem;
    font-family: PingFang SC;
    font-weight: bold;
    color: rgba(51, 51, 51, 1);
    margin-left: 0.1rem;
  }
}
.maincont {
  input {
    height: 0.5rem;
    line-height: 0.35rem;
    // width: 2rem;
    // max-width: 144px;
    background: #ffffff;
    border: none;
    font-size: 0.22rem;
    color: rgba(166, 173, 215, 1);
    text-align: center;
    // border: 0.01rem solid #ffffff;
    border-radius: 0.2rem;
    outline: none;
    &::-webkit-input-placeholder {
      color: #333333;
    }
  }
}

.choses {
  input {
    // background: rgba(246, 246, 246, 0.7);
    font-size: 0.22rem;
    color: rgba(166, 173, 215, 1);
    text-align: center;
    // border: 0.01rem solid rgba(166, 173, 215, 1);
  }
}
.sub {
  input {
    // background: rgba(246, 246, 246, 0.7);
    font-size: 0.22rem;
    color: rgba(166, 173, 215, 1);
    text-align: center;
    // border: 0.01rem solid rgba(166, 173, 215, 1);
  }
}
.culture {
  margin-top: 1.3rem;
  .el-table td,
  .el-table th.is-leaf,
  .el-table--border,
  .el-table--group {
    border-color: rgba(202, 233, 247, 1);
  }
  // .el-table--border::after,
  // .el-table--group::after,
  // .el-table::before {
  //   background-color: rgba(166, 173, 215, 1);
  // }
  .el-table td,
  .el-table th.is-leaf {
    border-bottom: none;
  }
  .el-table__body {
    tr:nth-child(1) {
      .cell {
        
        font-size: 0.26rem;
        height: 0.6rem;
        background: rgba(212, 217, 244, 1);
        border-radius: 0.05rem;
        width: 90%;
        margin-left: 5%;
        text-align: center;
        line-height: 0.6rem;
      }
    }
    tr:nth-child(2) {
      .cell {
        font-size: 0.24rem;
        font-family: PingFang SC;
        font-weight: 400;
        color: rgba(102, 102, 102, 1);
        line-height: 0.36rem;
        padding: 0rem 5%;
      }
    }
    tr:nth-child(3) {
      .cell {
        font-size: 0.3rem;
        font-family: HelveticaNeue LT 107 XBlkCn;
        font-weight: bold;
        color: rgba(58, 118, 255, 1);
        text-align: right;
        height: 0.5rem;
        line-height: 0.5rem;
        margin-right: 0.2rem;
      }
    }
  }

  .el-table__header-wrapper {
    tr {
      height: 0.7rem;
      p {
        font-size: 0.3rem;
      }
      span {
        color: rgba(135, 146, 208, 1);
        font-size: 0.16rem;
        font-weight: 400;
      }
    }
  }
}

.activityname {
  .el-table td,
  .el-table th.is-leaf {
    border-bottom: 1px solid rgba(202, 233, 247, 1);
  }
  .el-table__header-wrapper {
    tr {
      height: 0.7rem;
    }
  }
}
.el-message-box .el-message-box__btns .el-button--primary {
  background: #263173 !important;
}
</style>
